<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const BarECharts = ref(null)
const props = defineProps(['colors', 'count'])

const data = [
  {
    name: 'Apples',
    value: 70
  },
  {
    name: 'Strawberries',
    value: 68
  },
  {
    name: 'Bananas',
    value: 48
  },
  {
    name: 'Oranges',
    value: 40
  },
  {
    name: 'Pears',
    value: 32
  },
  {
    name: 'Pineapples',
    value: 27
  },
  {
    name: 'Grapes',
    value: 18
  }
];
const initEcharts = ((item) => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const color = ['#73a0fa', '#2167fa', '#5d72fb', '#73deb3', '#ff943d', '#fe6f50', '#7585a2', '#9bc5ff']
    const option = {

      series: [
        {
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '50%'],
          data: [{
            "name": "服务业",
            "value": "15"
          }],
          label: {
            show: true,
            position: 'center',
            formatter:(name)=>{
              console.log(name.data)
              return name.data.name + '\n' + name.data.value + '%'
            }
          },
          left: 0,
          right: '66.6667%',
          top: 0,
          bottom: 0,
          itemStyle: {
            normal: {
              color: color[2]
            }
          }
        },
        {
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '30%'],
          data: [{
            "name": "工业",
            "value": "108"
          }],
          label: {
            show: true,
            position: 'center',
            formatter:(name)=>{
              console.log(name.data)
              return name.data.name + '\n' + name.data.value + '%'
            }
          },
          left: '33.3333%',
          right: '33.3333%',
          top: 0,
          bottom: 0,
          itemStyle: {
            normal: {
              show: true,
              color: color[3]
            }
          }
        },
        {
          type: 'pie',
          radius: ['45%', '70%'],
          center: ['50%', '50%'],
          data: [{
            "name": "农业",
            "value": "1"
          }],
          label: {
            show: true,
            position: 'center',
            formatter:(name)=>{
              console.log(name.data)
              return name.data.name + '\n' + name.data.value + '%'
            }
          },
          left: '66.6667%',
          right: 0,
          top: 0,
          bottom: 0,
          itemStyle: {
            normal: {
              color: color[4]
            }
          }
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})

onMounted(() => {
  initEcharts()
})

</script>

<style lang="less" scoped>
</style>
